<template>
  <div class="register">
    <div class="title">欢迎您来到链客</div>
    <van-form @submit="onSubmit">
      <div class="field-box left-inpuot">
        <van-field
          v-model="formData.mobile"
          type="tel"
          name="请输入手机号码"
          placeholder="请输入手机号码"
          :rules="[{ required: true, validator, message: '请输入手机号码' }]"
        />
        <div class="left">+86</div>
      </div>
      <div class="field-box">
        <van-field
          v-model="formData.smsCode"
          type="smsCode"
          name="短信验证码"
          placeholder="短信验证码"
          default
          :rules="[{ required: true, message: '短信验证码' }]"
        />
        <div class="Code" @click="getCode()" :class="count ? 'success' : ''">
          <span v-if="!count">获取验证码</span
          ><span v-else>重新获取 {{ count }}s</span>
        </div>
      </div>
      <van-field
        v-model="formData.password"
        type="password"
        name="请输入密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请输入密码' }]"
      />
      <van-field
        v-model="formData.inviteCode"
        type="inviteCode"
        name="请输入邀请码"
        placeholder="请输入邀请码"
        :rules="[{ required: true, message: '请输入邀请码' }]"
        :readonly="!isAndroidApp"
      />
      <van-button
        :loading="loading"
        loading-text="注册中..."
        block
        type="warning"
        :class="isbutton ? 'current' : ''"
        native-type="submit"
        class="signIn"
        >注册</van-button
      >
    </van-form>
  </div>
</template>

<script>
import { Form, Field, Button, Notify, Dialog, Toast } from "vant";
import { registerSms, register } from "@/api/register";
import { onBackPressed, isAndroidApp } from "@/utils/APPempower";
import md5 from "js-md5";
export default {
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Toast.name]: Toast,
    [Notify.Component.name]: Notify.Component,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      formData: {
        mobile: "",
        smsCode: "",
        password: "",
        inviteCode: "",
      },
      count: "",
      timer: null,
      loading: false,
      isbutton: false,
      isAndroidApp: isAndroidApp(),
    };
  },
  created() {
    this.formData.inviteCode = this.$route.query.invite_code;
  },
  methods: {
    validator(val) {
      return /^1(3|4|5|6|7|8|9)\d{9}$/.test(val);
    },
    getCode() {
      if (!this.formData.mobile) {
        Toast.fail("请输入手机号码");
        return false;
      }
      if (!this.validator(this.formData.mobile)) {
        Toast.fail("请输入正确手机号码");
        return
      }
      if (!this.formData.inviteCode) {
        Toast.fail("请输入邀请码");
        return false;
      }
      const TIME_COUNT = 60;
      if (!this.timer) {
        let data = {
          mobile: this.formData.mobile.trim(),
          inviteCode: this.formData.inviteCode,
        };
        const toast = Toast.loading({
          duration: 0,
          forbidClick: true,
          message: "发送中...",
        });
        registerSms(data).then((res) => {
          Toast.clear();
          if (res.data.resultStatus) {
            this.count = TIME_COUNT;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          } else {
            Toast.fail(res.data.errorMessage);
          }
        });
      }
    },
    onSubmit() {
      let data = {
        mobile: this.formData.mobile.trim(),
        smsCode: this.formData.smsCode.trim(),
        password: md5(this.formData.password.trim()),
        inviteCode: this.formData.inviteCode,
      };
      this.loading = true;
      register(data).then((res) => {
        this.loading = false;
        if (res.data.resultStatus) {
          Dialog.alert({
            title: "注册成功",
          }).then(() => {
            if (this.isAndroidApp) {
              onBackPressed();
            } else {
              this.$router.push("/download");
            }
          });
        } else {
          Toast.fail(res.data.errorMessage);
        }
      });
    },
  },
  watch: {
    formData: {
      handler(item, oldVal) {
        if (item.mobile && item.smsCode && item.password && item.inviteCode) {
          this.isbutton = true;
        } else {
          this.isbutton = false;
        }
      },
      deep: true,
    },
  },
};
</script>

<style lang="less" scoped>
.register {
  padding: 0 28px;
  .title {
    margin-top: 17px;
    height: 28px;
    font-size: 20px;
    font-weight: 500;
    color: #333333;
    line-height: 28px;
  }
  .van-form {
    margin-top: 74px;
  }
  .van-cell {
    margin-top: 19px;
    height: 20px;
    padding: 13px 0;
    box-sizing: content-box;
    &:after {
      left: 0;
      right: 0;
      border-bottom: 1px solid #eeeeee;
    }
    /deep/.van-field__error-message {
      display: none;
    }
  }
  .field-box {
    position: relative;
    .Code {
      position: absolute;
      display: inline-block;
      right: 0;
      top: 13px;
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      color: #fe4b08;
      line-height: 20px;
    }
    .left {
      position: absolute;
      display: inline-block;
      left: 0;
      top: 13px;
      font-size: 16px;
      font-weight: 500;
      color: #333333;
      line-height: 22px;
    }
    /deep/ input {
      font-size: 14px;
    }
    &.left-inpuot {
      .van-cell {
        /deep/ input {
          text-indent: 50px;
        }
      }
    }
  }
  .van-button {
    margin-top: 137px;
    height: 46px;
    border: none;
    font-size: 16px;
    border-radius: 46px;
    background: rgba(0, 161, 168, 0.3);
    &.current {
      background: rgba(0, 161, 168, 1);
      opacity: 1;
    }
  }
}
</style>
